<template>
  <div class="load-more" v-if="total > hideNoMoreByLimit">
    <template v-if="count < total">
      <el-button type="primary" text :loading="loading" @click="$emit('load')">
        {{ loading ? '加载中...' : '加载更多' }}
      </el-button>
    </template>
    <template v-else>
      <div class="no-more">没有更多了</div>
    </template>
  </div>
</template>

<script setup lang="ts">
// 设置总数少于多少条以内 不展示 没有更多了 hide-no-more-by-limit
import { withDefaults } from 'vue';

withDefaults(
  defineProps<{
    total: number;
    count: number;
    loading?: boolean;
    hideNoMoreByLimit: number;
  }>(),
  {
    total: 0,
    count: 0,
    loading: false,
    hideNoMoreByLimit: 10
  }
);

defineEmits<{
  (e: 'load'): void;
}>();
</script>

<style scoped>
.load-more {
  display: flex;
  justify-content: center;
  padding: 12px 0;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}
.no-more {
  color: #999;
  font-size: 13px;
}
</style>
